<template>
    <div class="liquidCon">
      <div class="liquidBorderImg">
        <div class="itemBox">
          <div id="passChart" style="min-width:110px;min-height:110px;height:110px;color:white;"></div>
          <div class="labelText">{{totalData.list[0].name}}</div>
        </div>
        <div class="">
          <div id="noPassChart" style="min-width:110px;min-height:110px;height:110px;color:white;"></div>
          <div class="labelText">{{totalData.list[1].name}}</div>
        </div>
      </div>
    </div>
</template>
<script>
import echarts from "echarts";
require("echarts-liquidfill");
export default {
  props: {
    value: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  watch: {
    value(res) {
      this.setChart(res);
    }
  },
  data() {
    return {
      totalData: {
        list: [{ name: "", value: 0 }, { name: "", value: 0 }],
        total: 0
      },
      myChart: null,
      myChart2: null,
      setInterTime: null,
      timeOut: null
    };
  },
  mounted() {
    // this.setChart();
  },
  beforeDestroy() {
    clearInterval(this.setInterTime);
    clearTimeout(this.timeOut);
  },
  methods: {
    setChart(res) {
      console.log(JSON.stringify(res));
      this.$set(this, "totalData", res);
      var self = this;
      var option = {
        title: {
          text: ""
        },
        series: [
          {
            type: "liquidFill",
            name: "总人数: " + res.total,
            color: [
              new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#22B473"
                }
              ]),
              new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(34,180,115,0.6)	"
                },
                {
                  offset: 1,
                  color: "rgba(34,180,115, 0.3)	"
                }
              ])
            ],
            legend: {
              show: true,
              left: "20%",
              bottom: "10%"
            },
            data: [
              {
                name: "男性占比",
                value: res.list[0].value / res.total
              },
              {
                value: res.list[0].value / res.total,
                phase: Math.PI
              }
            ],
            radius: "100%",
            label: {
              normal: {
                position: ["50%", "60%"],
                color: "#22B473",
                insideColor: "black",
                fontFamily: "DIN Condensed Bold",
                fontSize: 30,
                lineHeight: 25,
                formatter: function(params) {
                  return (
                    // "\n{a| 总库位:}{b| " +
                    // Number(res.total).toLocaleString() +
                    // "} \n {c| 库存使用率} \n\n\n" +
                    ((res.list[0].value / res.total) * 100).toFixed(2) + "%"
                  );
                },
                rich: {
                  a: {
                    color: "#22B473",
                    fontSize: 24
                  },
                  b: {
                    color: "#22B473",
                    fontSize: 26,
                    fontFamily: "DIN Condensed Bold"
                  },
                  c: {
                    color: "#22B473",
                    fontSize: 38,
                    fontFamily: "DIN Condensed Bold"
                  }
                }
              }
            },
            backgroundStyle: {
              color: "rgba(34,180,115,0.1)"
            },
            outline: {
              show: false
            },
            phase: 0,
            period: 4000,
            waveLength: "100%",
            animationDurationUpdate: 2000
          }
        ]
      };
      var option2 = {
        title: {
          text: ""
        },
        series: [
          {
            type: "liquidFill",
            name: "总人数: " + res.total,
            color: [
              new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(238,63,134,1)"
                },
                {
                  offset: 1,
                  color: "rgba(238,63,134, 0.6)"
                }
              ]),
              new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(238,63,134,0.6)	"
                },
                {
                  offset: 1,
                  color: "rgba(238,63,134, 0.3)	"
                }
              ])
            ],
            data: [
              {
                name: "女性占比",
                value: res.list[1].value / res.total
              },
              {
                value: res.list[1].value / res.total,
                phase: Math.PI
              }
            ],
            radius: "100%",
            label: {
              normal: {
                position: ["50%", "60%"],
                color: "#EE3F86",
                insideColor: "black",
                fontFamily: "DIN Condensed Bold",
                fontSize: 30,
                lineHeight: 25,
                formatter: function(params) {
                  return (
                    // "\n{a| 总库位:}{b| " +
                    // Number(res.total).toLocaleString() +
                    // "} \n {c| 库存使用率} \n\n\n" +
                    ((res.list[1].value / res.total) * 100).toFixed(2) + "%"
                  );
                },
                rich: {
                  a: {
                    color: "#EE3F86",
                    fontSize: 24
                  },
                  b: {
                    color: "#EE3F86",
                    fontSize: 26,
                    fontFamily: "DIN Condensed Bold"
                  },
                  c: {
                    color: "#EE3F86",
                    fontSize: 38,
                    fontFamily: "DIN Condensed Bold"
                  }
                }
              }
            },
            backgroundStyle: {
              color: "rgba(238,63,134,0.1)"
            },
            outline: {
              show: false
            },
            phase: 0,
            period: 4000,
            waveLength: "100%",
            animationDurationUpdate: 2000
          }
        ]
      };

      this.timeOut = setTimeout(function() {
        self.myChart = echarts.init(
          document.getElementById("passChart"),
          null,
          {
            devicePixelRatio: 2
          }
        );
        self.myChart2 = echarts.init(
          document.getElementById("noPassChart"),
          null,
          {
            devicePixelRatio: 2
          }
        );
        self.myChart.setOption(option);
        self.myChart2.setOption(option2);
      }, 0);
    }
  }
};
</script>

<style lang="scss" scoped>
.liquidCon {
  display: flex;
  position: absolute;
  left: 20px;
  right: 0;
  top: 0;
  bottom: 0;
}
.labelText {
  margin-top: 10px;
  width: 100%;
  text-align: center;
  color: #29aae1;
}
.liquidBorderImg {
  display: flex;
  align-items: center;
}
.liquidBorderImg .itemBox {
  margin-right: 30px;
}
</style>